import React, { Component } from 'react';
import { connect } from 'react-redux';
import store from '../../store';
import { actionCreator } from './store';
import {
    HeaderWrap,
    Logo,
    NavItem,
    Nav,
    Addition,
    Button,
    Input,
    SearchWrapper,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoList,
    SearchInfoItem
} from './style';
class Header extends Component {
  getListArea(show) {
    if (show) {
      return (
        <SearchInfo>
        <SearchInfoTitle>
          热门搜索
          <SearchInfoSwitch>
            换一批
          </SearchInfoSwitch>
        </SearchInfoTitle>
        <SearchInfoList>
          { 
            (this.props.list).map((ele) => {
            return <SearchInfoItem>{ele}</SearchInfoItem>
          }) 
          }
          
        </SearchInfoList>
      </SearchInfo>
      );
    } else {
      return null;
    }
  }
  render () {
    return (
      <div className='header-border'>
        <HeaderWrap>
          <Logo/>
          <Nav>
            <NavItem className='left active'><i className='iconfont'>&#xe602;</i>首页</NavItem>
            <NavItem className='left'><i className='iconfont'>&#xe625;</i>下载App</NavItem>
            <SearchWrapper>
                <Input 
                  className={ this.props.isFocus ? 'focus' : '' }
                  onFocus={ this.props.handleInputFocus }
                  onBlur={ this.props.handleInputBlur }
                  />
                <i className={ this.props.isFocus ? 'iconfont search-btn focus' : 'iconfont search-btn' }>
                  &#xe6a8;
                </i>
                { this.getListArea(this.props.isFocus) }
            </SearchWrapper>
            <NavItem className='right login'>登录</NavItem>
            <i className='iconfont right style-mode-btn'>&#xe636;</i>
          </Nav>
          <Addition className="clear">
            <Button className='write-btn'><i className='iconfont'>&#xe61c;</i>写文章</Button>
            <Button className='sign-up'>注册</Button>
          </Addition>
        </HeaderWrap>  
      </div>
    )
  }
}
const mapStateToProps = (state) => ({
  isFocus: state.getIn(['header', 'isFocus']), //state.get('header').get('isFocus')
  list: state.getIn(['header', 'list'])
});
const mapDispatchToProps = (dispatch) => ({
  handleInputFocus() {
    store.dispatch(actionCreator.getHeaderList())
    store.dispatch(actionCreator.searchFocus())
  },
  handleInputBlur() {
    store.dispatch(actionCreator.searchBlur())
  }
});

// export default Header;
export default connect(mapStateToProps, mapDispatchToProps)(Header);